import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { v4 as uuidv4 } from 'uuid';
import { Modal, Radio, Tabs } from 'antd';

import * as d3 from 'd3';
import { Link } from 'react-router'
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const _ = require('lodash');
import { hashHistory } from 'react-router';
import { tools } from '../../constants/jsonArray';
import SearchBar from '../SearchBar';

const styles = {
	radioGroup: {
		display: 'block',
	},
	radio: {
		display: 'block',
		lineHeight: '30px',
		height: 30,
	},
	selectedFirstItem: {
		color: 'rgb(52, 73, 94)',
		backgroundColor:'#fff'
	},
	selectedSecondItem: {
		color: '#59abe3'
	},
	expandIcon: {
		textAlign: 'center',
		padding: '35px 0px 0px 0px',
		height: 100,
		borderBottom: '1px solid #ccc'
	}
};

class Tools extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectSource: false,
			source: {},
			selectedFirstItem: '建模',
			selectedFirstKey: '',
			selectedSecondItem: '',
			selectedSecondKey: '',
			expanded: true
		};
	}

	componentDidMount() {

	}
	selectFirstMenuItem = (item) => {
		this.setState({
			selectedFirstItem: item.label,
			selectedFirstKey: item.key,
			selectedSecondItem: this.state.selectedFirstItem === item.label ? this.state.selectedSecondItem : ''
		}, () => {
			if (item.label === '建模') {
				hashHistory.push('/')
			} else if(item.label === '查询'){
				hashHistory.push('/search')
			}else {
				hashHistory.push('/searchresult')
			}
		})
	}
	selectSecondMenuItem = (item) => {
		console.log('item: ', item)
		this.setState({
			selectedSecondItem: item.label,
			selectedSecondKey: item.key
		}, () => {
			if (this.state.selectedFirstItem === '建模' || this.state.selectedFirstItem === '查询') {
				hashHistory.push(item.url)
			} else {
				// hashHistory.push('/searchresult')
			}
		})
	}
	setExtendContent = () => {
		this.setState({expanded: !this.state.expanded})
	}
	render() {
		const { selectedFirstItem, selectedFirstKey, selectedSecondItem, selectedSecondKey, expanded } = this.state;
		const firstItems = tools.map((item, index) => {
			return (
				<div key={index}
						 className="first-level-menu-item"
						 style={selectedFirstItem === item.label ? styles.selectedFirstItem : {}}
						 onClick={this.selectFirstMenuItem.bind(null, item)}>
					<i className={`icon iconfont icon-${item.icon}`} style={{fontSize: 16}}></i>
					<div style={{fontSize: 18, marginLeft: 10}}>{item.label}</div>
				</div>
			)
		});
		const index = tools.findIndex(item => item.label === selectedFirstItem);
		const secondItems = tools[index].children.map((item, index) => {
			return (
				<div key={index}
						 className="second-level-menu-item"
						 style={selectedSecondItem === item.label ? styles.selectedSecondItem : {}}
						 onClick={this.selectSecondMenuItem.bind(null, item)}>
					{item.label}
				</div>
			)
		})
		return (
			<div className="graph-tools">
				<div className="first-level-menu">
					{firstItems}
				</div>
				<div className="second-level-menu">
					{secondItems}
					<div style={{...styles.expandIcon, display: (selectedFirstItem === '查询' || selectedFirstItem === '分析') ? 'block' : 'none'}}>
					{
						expanded ?
						<i className="icon iconfont icon-zhankai2"
							 style={{fontSize: 23, cursor: 'pointer', color: '#999999'}}
							 onClick={this.setExtendContent}>
						</i>
						:
						<i className="icon iconfont icon-zhankai3"
							 style={{fontSize: 23, cursor: 'pointer', color: '#999999'}}
							 onClick={this.setExtendContent}>
						</i>
					}
					</div>
				</div>
				{
					(selectedFirstItem === '查询' || selectedFirstItem === '分析') && expanded ?
					<div>
						<SearchBar setSearchType={this.props.setSearchType} setExtendContent={this.setExtendContent} selectedFirstKey={selectedFirstKey} selectedSecondKey={selectedSecondKey}/>
					</div>
					:
					null
				}
			</div>
		)
	}
}

function mapState2Props(state) {
	return {};
}

Tools = connect(mapState2Props)(Tools);

export default Tools;
